<template>
  <view class="cantant">
    <view class="showModle"></view>
    <view class="uni_main" v-if="isPackage">
			<div class="s_hide_parent" @tap="clickHide">
				<image class="s_hide" src="/static/img/hide.png"></image>
			</div>
      <view class="uni_imgs flex">
				<image class="uni_img" @tap="handleShowGoodsImage(thumb)" style="margin: 0 auto;" mode="aspectFill" :src="thumb + '?imageView2/1/w/702/h/702/q/75'"></image>
        <view class="uni_detail" @tap="isDetailShow">
          <image class="uni_icon" mode="aspectFill" src="/static/img/img.png"></image>
          <view class="uni_tip">点击此处查看详情></view>
        </view>
			</view>
      <view class="uni_cont">
        <view class="uni_info">
          <view class="uni_item flex">
            <view class="uni_tit eheig60 heig60">
              <view class="goods-title">￥ {{ goodsInfo && goodsInfo.price }}</view>
              <view class="goods-id"> ID: {{ goodsInfo && goodsInfo.goods_number }}</view>
            </view>
            <view class="uni_dat backg heig60">
              <view class="uni_name">{{ title }}</view>
              <view class="uni_ename">{{ subtitle }}</view>
            </view>
          </view> 
          <view class="uni_item" v-if="goodsInfo">
            <!-- <view class="uni_tit">规&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</view>
            <view class="uni_attr flex">
              <view v-for="(itm, index) in attrs" :key="index" :class="attrId == itm.id ? 'uni_nom attred flex1' : 'uni_nom flex1'" @click="handleClick(itm)">
                {{ itm.attr_name }} {{ itm.attr_unit}}
              </view>
            </view> -->
            <view class="package-item" v-for="(item, idx) in goodsInfo.package" :key="idx">
              <view class="package-item-line">
                <view class="package-name">{{ item.title }}</view>
                <!-- <view class="package-subname">{{ item.subtitle }}</view> -->
              </view>
              <view class="package-num">{{ item.num }}{{item.unit}}</view>
            </view>
          </view>
          <view class="uni_item flex">
            <view class="uni_tit">￥{{ goodsInfo && goodsInfo.price * num }}</view>
            <view class="uni_dat flex bord last-info">
              <view class="uni_norm flex flex1 flex_j">
                <view class="uni_prv uni_com" @tap="bindMinus">-</view>
                <view class="uni_num">{{ num }}</view>
                <view class="uni_nex uni_com" @tap="bindPlus">+</view>
              </view>
              <view class="uni_norm flex flex1 norm-price" >
                <view class="">￥</view>
                <view class="norm-unit">{{ goodsInfo && goodsInfo.price }}/份</view>
              </view>
              
            </view>
          </view>
        </view>
        <view class="uni_btn" @tap="joinCar">加入购物车</view>
      </view>
    </view>
    <view class="uni_main" v-else>
			<div class="s_hide_parent" @tap="clickHide">
				<image class="s_hide" src="/static/img/hide.png"></image>
			</div>
      <view class="uni_imgs flex">
        <image class="uni_img" @tap="handleShowGoodsImage(thumb)" mode="aspectFill" :src="thumb + '?imageView2/1/w/702/h/702/q/75'"></image>
        <view class="uni_detail" @tap="isDetailShow">
          <image class="uni_icon" mode="aspectFill" src="/static/img/img.png"></image>
          <view class="uni_tip">点击此处查看详情></view>
        </view>
      </view>
      <view class="uni_cont">
        <view class="uni_info">
          <view class="uni_item flex">
            <view class="uni_tit eheig60 heig60">ID: {{ goodsInfo && goodsInfo.goods_number }}</view>
            <view class="uni_dat backg heig60">
              <view class="uni_name">{{ title }}</view>
              <view class="uni_ename">{{ subtitle }}</view>
            </view>
          </view>
          <view class="uni_item flex">
            <view class="uni_tit">规&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</view>
            <view class="uni_attr flex" v-if="attrs.length">
              <view v-for="(itm, index) in attrs" :key="index" :class="attrId == itm.id ? 'uni_nom attred flex1' : 'uni_nom flex1'" @tap="handleClick(itm)">
                {{ itm.attr_name }}{{ itm.attr_unit }}
              </view>
            </view>
            <view class="uni_attr flex" v-else-if="goodsInfo && goodsInfo.goods_type === 1">
              <view class="uni_nom flex1">
                {{ goodsInfo && goodsInfo.goods_volume }}{{ goodsInfo && goodsInfo.unit }}
              </view>
            </view>
            <view class="uni_attr flex" v-else-if="goodsInfo && goodsInfo.goods_type !== 1">
              <view class="uni_nom flex1" v-if="goodsInfo && (goodsInfo.goods_volume + goodsInfo.unit)">
                <!-- {{ goodsInfo && goodsInfo.goods_volume }} -->
                {{ goodsInfo && goodsInfo.goods_volume + goodsInfo.unit }}
              </view>
            </view>
          </view>
          <view class="uni_item flex">
            <view class="uni_tit">数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;量</view>
            <view class="uni_dat flex bord last-info">
              <view class="uni_norm flex flex1 flex_j">
                <view class="uni_prv uni_com" @tap="bindMinus">-</view>
                <view class="uni_num">{{ num }}</view>
                <view class="uni_nex uni_com" @tap="bindPlus">+</view>
              </view>
              <view v-if="num == 1" class="uni_norm flex flex1 norm-price">
                <view class="">￥</view>
                <!-- <view class="norm-unit">{{ attrPrice }} 元/{{ attrUnit }}</view> -->
                <view class="norm-unit" v-if="!inte">{{ attrPrice }} 元</view>
								<view class="norm-unit" v-if="inte">{{ attrPrice }} 积分</view>
              </view>
              <view v-else class="uni_norm flex flex1 norm-price">
                <view class="">￥</view>
                <view class="norm-unit" v-if="!inte">{{ goodsTotalPrice }} 元</view>
								<view class="norm-unit" v-if="inte">{{ attrPrice }} 积分</view>
              </view>
            </view>
          </view>
        </view>
        <view v-if="goodsInfo && !goodsInfo.stock" class="uni_btn btn-sale-out" >已售罄</view>
        <view v-else class="uni_btn" @tap="joinCar">加入购物车</view>
      </view>
    </view>
    <view class="cont_main" :class="{ show: isDetail }">
      <view class="cont_detail">
        <view class="cont_info">
          <view class="cont_title">商品详情</view>
          <view class="cont_etitle">Commodity details</view>
          <!-- <view class="cont_etitle">{{ subtitle }}</view> -->
          <view class="cont_itms">
            <view class="cont_itm">名称：{{ goodsInfo && goodsInfo.title }}</view>
            <view class="cont_itm" v-if="goodsInfo && goodsInfo.goods_type === 1">酒精浓度: {{ goodsInfo && goodsInfo.degree }}</view>
            <view class="cont_itm" v-if="goodsInfo && goodsInfo.goods_style">风格：{{ goodsInfo && goodsInfo.goods_style }}</view>
            <view class="cont_itm" v-if="goodsInfo && goodsInfo.goods_style">原产地：{{ goodsInfo && goodsInfo.goods_place }}</view>
            <view class="cont_itm" v-if="goodsInfo && goodsInfo.goods_style">单瓶容量：{{ goodsInfo && goodsInfo.goods_volume }}ml</view>
          </view>
        </view>
        <rich-text v-if="goodsInfo.is_package" class="cont_data_package" :nodes="content"></rich-text>
				<rich-text v-if="!goodsInfo.is_package" class="cont_data" :nodes="content"></rich-text>
      </view>
    </view>
		// 图片放大
		<view  :class="{'light-group': true, 'showImage': GoodsImage}" @tap="handleHideGoodsImage(2)">
			<view class="light-box" @tap.stop="handleHideGoodsImage(1)">
				<image :src="goodsInfo.thumb" class="GoodsImage"></image>
			</view>
		</view>
  </view>
</template>

<script>
import { GOODS_DETAIL, INTEGRAL_GOODS_DETAIL, CART_ADD, GOODS_PACKAGE_DETAIL, INTEGRAL_CART_ADD } from '@/api';
import goodsMixin from '@/mixins/goods.js'
export default {
  props: {
    goodsId: {
      default: 1,
      type: Number
    },
    inte: {
      //是否积分添加  如果积分添加   字段为1
      default: 1,
      type: Number
    },
    isPackage: {
      type: Boolean,
      default: false
    }
  },
  mixins: [goodsMixin],
  data() {
    return {
      tableId: this.$store.state.storeConf.table_id,
      deviceNum: this.$store.state.storeConf.device_num,
      storeId: this.$store.state.storeConf.store_id,
      num: 1,
      isDetail: false,
      attrs: [], //规格
      subtitle: '', //副标题
      title: '', //标题,
      thumb: '', //主图
      category_id: '', //,

      content: '', //详情
      attrId: '',
      attrPrice: '', //规格价格,
      goodsTotalPrice: 0,
      goodsInfo: {},
			GoodsImage: false,
    };
  },
  mounted() {
    if (this.isPackage) {
      this.getGoodsPackageDetail();
    } else {
      this.getGoodsDetail();
    }
  },
  methods: {
    bindMinus() {
      //减
      let num = this.num;
      if (num > 1) {
        num--;
      }
      this.num = num;
      this.goodsTotalPrice = (this.attrPrice * 100 * this.num / 100).toFixed(2)
    },
    bindPlus() {
      //加
      let num = this.num;
      num++;
      this.num = num;
      this.goodsTotalPrice = (this.attrPrice * 100 * this.num / 100).toFixed(2)
    },
    // 商品详情
    getGoodsDetail() {
			let url = this.inte ? INTEGRAL_GOODS_DETAIL : GOODS_DETAIL;
      this.$_get(url, {
        id: this.goodsId
      }).then(res => {
        if (res.msg == '获取成功') {
          let data = res.data;
          this.goodsInfo = res.data;
          this.subtitle = data.subtitle;
          this.thumb = data.thumb;
          this.title = data.title;
          this.category_id = data.category_id;
          this.attrs = data.attrs;

          this.content = data.content;
          if (data.attrs.length) {
            this.attrId = data.attrs[0].id;
            this.attrPrice = data.attrs[0].attr_price;
            this.attrUnit = data.attrs[0].attr_unit;
          } else {
            this.attrId = 0
            this.attrPrice = data.price
            this.attrUnit = data.unit;
          }
        } else {
        }
      });
    },
    // 套餐商品详情
    getGoodsPackageDetail() {
      this.$_get(GOODS_PACKAGE_DETAIL, {
        id: this.goodsId
      }).then(res => {
        if (res.msg == '获取成功') {
          this.goodsInfo = res.data;
          let data = res.data;
          this.subtitle = data.subtitle;
          this.thumb = data.thumb;
          this.title = data.title;
          this.category_id = data.id;
          // this.attrs = data.attrs;
          this.content = data.content;
          // if (data.attrs.length) {
          //   this.attrId = data.attrs[0].id;
          //   this.attrPrice = data.attrs[0].attr_price;
          // } else {

          // }
        } else {
        }
      });
    },
    handleClick(itm) {
      //切换规格
      this.attrId = itm.id;
      this.attrPrice = itm.attr_price;
      this.goodsTotalPrice = (this.attrPrice * 100 * this.num / 100).toFixed(2)
    },
    isDetailShow() {
      this.isDetail = !this.isDetail;
    },
    clickHide() {
      this.$emit('cartIsShow', false);
    },
    joinCar() {
      //加入购物车
      let that = this;
      let url = that.inte ? INTEGRAL_CART_ADD : CART_ADD;
      that
        .$_post(url, {
          table_id: that.tableId,
          device_num: that.deviceNum,
          store_id: that.storeId,
          goods_id: that.goodsId,
          attr_id: that.attrId, //[int]		规格id(当该商品有规格时必填)
          num: that.num //[int]		默认为1
        })
        .then(res => {
          if (res.code) {
            that.clickHide();
            if (that.inte) {
              that.getIntegralCartList(that.tableId, that.storeId)
            } else {
              that.getCartList(that.tableId, that.storeId)
            }
          } else {
            uni.showToast({
              icon: 'loading',
              title: res.msg
            });
          }
        });
    },
		// 显示大图
		handleShowGoodsImage(thumb) {
			this.GoodsImage = ''
			console.log(thumb)
			if (thumb) {
				this.GoodsImage = true
			}
		},
		handleHideGoodsImage(tag) {
			console.log(tag)
			if (tag == 2) {
				this.GoodsImage = false
			}
		}
  }
};
</script>

<style lang="scss" scoped>
.uni_main {
  position: fixed;
  width: 59vw;
  height: 57vw;
  top: 50%;
  margin-top: -28.5vw;
  left: 50%;
  margin-left: -29.5vw;
  background: #ffffff;
  z-index: 9;
  border-radius: 10px;
}
.s_hide_parent{
	position: absolute;
  width: 5vw;
  height: 5vw;
  top: 1vw;
  right: 1vw;
	display: flex;
	justify-content: center;
	align-items: center;
}
.s_hide {
  width: 2vw;
  height: 2vw;
}

.uni_imgs {
  padding: 5vw 5vw 2.5vw;
  justify-content: space-between;
}

.uni_img {
  width: 23vw;
  height: 23vw;
  box-shadow: 0 0 10px 2px #888888;
  border-radius: 10px;
}

.uni_detail {
  text-align: center;
}

.uni_icon {
  width: 20vw;
  height: 20vw;
}

.uni_tip {
  font-size: 16px;
  line-height: 3vw;
  letter-spacing: 2px;
  color: #030303;
}

.uni_cont {
  width: 50vw;
  margin: 0 auto;
}

.uni_info {
  width: 100%;
}

.uni_item {
  margin-bottom: 1vw;
}

.uni_tit {
  height: 4vw;
  width: 13vw;
  background-color: #c9ab6f;
  color: #ffffff;
  font-size: 2vw;
  text-align: center;
  line-height: 4vw;
  border: solid 2px #c9ab6f;
}

.backg {
  background: #fdefd0;
}

.uni_dat {
  width: 37vw;
  height: 6vw;
  box-sizing: border-box;
  padding: 0.8vw 2vw;
  color: #000000;
}

.uni_name {
  font-size: 1.8vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uni_ename {
  font-size: 1.6vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eheig60 {
  height: 6vw;
  border: none;
}

.heig60 {
  height: 6vw;
}
.uni_tit.heig60 {
  line-height: 6vw;
}

.bord {
  border: solid 2px #c8ad67;
  padding: 4px 0;
}

.uni_norm {
  line-height: 34px;
  text-align: center;
  border-right: 1px solid #c8ad67;
  font-size: 1.6vw;
}

.uni_norm:last-child {
  border-right: none;
}

.uni_prv {
  color: #c8ad67;
  background: #ffffff;
  margin-left: 10px;
}

.uni_nex {
  color: #ffffff;
  background: #c8ad67;
  margin-right: 10px;
}

.uni_com {
  width: calc(3vw - 4px);
  height: calc(3vw - 4px);
  line-height: 3vw;
  border-radius: 50%;
  border: solid 2px #c8ad67;
  font-size: 2vw;
  margin-top: 0.5vw;
  line-height: calc(3vw - 6px);
}

.uni_btn {
  width: 100%;
  height: 5vw;
  margin-top: 2vw;
  line-height: 5vw;
  background: #c8ad67;
  text-align: center;
  font-size: 2vw;
  color: #ffffff;
  letter-spacing: 10px;
}
.cont_data {
  font-size: 16px;
  text-indent: 32px;
  padding: 20px 8px;
}
.cont_data_package {
  font-size: 16px;
  padding: 20px 8px;
	text-indent: 8px;
}
.uni_wrap {
  flex-wrap: wrap;
}

.uni_attr {
  border: solid 2px #c8ad67;
  width: 37vw;
  line-height: 4vw;
  box-sizing: border-box;
}

.uni_nom {
  // border-right: 1px solid #c8ad67;
  border: none;
  text-align: center;
}

.uni_nom:last-child {
  border-right: none;
}

.attred {
  margin: 0;
  background: #fdefd0;
  font-size: 1.6vw;
  border-right: none;
  line-height: 4vw;
  color: #010101;
}
.last-info {
  height: 4vw;
  padding: 0;
  box-sizing: content-box;
}
.last-info .uni_norm {
  line-height: 4vw;
}
.norm-price {
  position: relative;
  padding: 0 0.5vw;
  .norm-unit {
    position: absolute;
    right: 0.5vw;
  }
}
.goods-title {
  padding-top: 4px;
  line-height: 32px;
  font-size: 20px;
}
.goods-id {
  font-size: 14px;
  line-height: 16px;
}
.package-item {
  width: 50%;
  position: relative;
  // padding-right: 5.5vw;
  background-color: #c9ab6f;
  // padding-left: 0.5vw;
  box-sizing: border-box;
	display: inline-flex;
  color: #fff;
	border-bottom: 1px solid #fff;
	.package-item-line {
		display: inline-flex;
		justify-content: center;
		align-items: center;
	}
  .package-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 24px;
		text-indent: 4px;
  }
  .package-num {
    background-color: #fef7e7;
    position: absolute;
    width: 5vw;
    right: 0;
    top: 0;
    height: 100%;
    color: #000;
    // line-height: 44px;
    text-align: center;
    font-size: 16px;
  }
}
.btn-sale-out{
  background-color: #bbb;
}
.light-group{
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(44,44,44,0.7);
	width: 100vw;
	height: 100vh;
	z-index: 999999;
	justify-content: center;
	align-items: center;
	display: none;
}
.light-box {
	width: 620px;
	height: 620px;
}
.light-box image {
	width: 620px;
	height: 620px;
}
.showImage{
	display: flex;
}
</style>
